<template>
    <div>
        <el-button type="text" @click="add">打开嵌套表格的 Dialog</el-button>
        <el-button @click="exportExcel">导出文档</el-button>
        <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" :row-key="getRowKeys" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" :reserve-selection="true">
            </el-table-column>
            <el-table-column label="日期" width="120">
                <template slot-scope="scope">{{ scope.row.date }}</template>
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="120">
            </el-table-column>
            <el-table-column prop="address" label="地址" show-overflow-tooltip>
            </el-table-column>
        </el-table>

    </div>
</template>

<script>
export default {
    name: 'rights',
    data() {
        return {
            tableData: [{
                id: 1,
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                id: 2,
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                id: 3,
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }],
            dialogTableVisible: false,
        }
    },
    methods: {
        handleSelectionChange(e) {
            localStorage.setItem('row', JSON.stringify(e))
        },
        add() {
            const selectIdList = JSON.parse(localStorage.getItem('row'))
            for (var i in this.tableData) {
                console.log(i);
                if (this.tableData[i].id == selectIdList[i].id) {
                    this.$refs.multipleTable.toggleRowSelection(this.tableData[i]);
                }
            }
        },
        getRowKeys(row) {
            return row.id; //一般是你选择项的id
        },
        exportExcel() {
            require.ensure([], () => {
                const {
                    export_json_to_excel
                } = require("../../utils/Export2Excel");
                const tHeader = ["id", "时间", "姓名", "地址"]; // 这是excel文档第一行显示的标题
                const filterVal = ["id", "date", "name", "address"]; // id，version等都是上面标题所对应的数据
                const list = this.tableData; //把data里的数组tableData存到list中
                const data = this.formatJson(filterVal, list);
                export_json_to_excel(tHeader, data, "列表excel"); //标题，数据，文件名
            });
        },

        formatJson(filterVal, jsonData) {
            return jsonData.map(v => filterVal.map(j => v[j]));
        },
    },
    mounted() {


    },
}
</script>

<style lang="scss" scoped>
</style>